<template>
  <div class="department">
    <pageSearch @query-click="handleQueryClick" @reset-click="handleRestClick"></pageSearch>
    <pageContent
      ref="contentRef"
      @show-modal="handleCreateClick"
      @edit-modal="haldleEditClick"
    ></pageContent>
    <pageModal ref="modalRef"></pageModal>
  </div>
</template>

<script setup lang="ts" name="department">
import { ref } from 'vue'

import pageSearch from './child-cpns/page-search.vue'
import pageContent from './child-cpns/page-content.vue'
import pageModal from './child-cpns/page-modal.vue'

const contentRef = ref<InstanceType<typeof pageContent>>()
const modalRef = ref<InstanceType<typeof pageModal>>()

function handleQueryClick(formData: any) {
  contentRef.value.getPageListData(formData)
}

function handleRestClick() {
  contentRef.value.getPageListData()
}

function handleCreateClick() {
  modalRef.value.setModalState()
}

function haldleEditClick(itemData: any) {
  modalRef.value.setModalState(false, itemData)
}
</script>

<style scoped>
.department {
  border-radius: 20px;
  overflow: hidden;
}
</style>
